{% extends "base.html" %}
{% load static %}

{% block links %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
  <script src="{% static 'js/index.js' %}" defer="defer"></script>
  <title>小兵小兵</title>
{% endblock %}

{% block mainbody %}
  <a id="a-1"><h1><b><i>小兵小兵电子版</i></b></h1></a>
  <ul id="u-1">
    <img src="{% static 'images/icon.ico' %}">
    <li id="l-1">离线</li>
    <li id="l-2">在线</li>
    <li id="l-3">规则</li>
  </ul>
  <p id="p-r"></p>
  <div id="offline">
    <img src="{% static 'images/poster.png' %}">
    <form action="./game">
      <label class="l-n" for="a">人机数量：</label>
      1<input type="range" name="number" id="a" min="1" max="10" value="2" step="1">10
      已选择：<output class="l-n" for="a" id="showNumber">2</output>
      <input type="submit" id="b-p" value="开始游戏">
    </form>
  </div>
  <div id="online">
    <form action="./online">
      <label class="l-n" for="b">名字：</label>
      <input type="text" name="playerName" id="b" class="rainbow" autofocus="autofocus" required>
      <input type="submit" id="b-n" value="开始游戏">
    </form>
  </div>
{% endblock %}